import { InputNumber } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from '../../index.less';
import { getAmountChinese } from '../../utils';

const Amount = (props, ref) => {
    const { onChange, value } = props;
    // 大小写转换
    const [amountChinese, setAmountChinese] = useState();
    const transformationAmount = e => {
        const amount = getAmountChinese(e);
        setAmountChinese(amount);
        onChange(e);
    };
    const onChangeAmount = values => {
        transformationAmount(values);
    };
    useEffect(() => {
        if (value) {
            transformationAmount(value);
        }
    }, [value]);
    return (
        <>
            <InputNumber
                {...props}
                style={{ width: '100%' }}
                formatter={e => `$ ${e}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                parser={e => e.replace(/\$\s?|(,*)/g, '')}
                onChange={onChangeAmount}
                min={0}
                maxLength={13}
                precision="2"
                ref={ref}
            />
            <p className={styles.amount}>大写:{amountChinese}</p>
        </>
    );
};
export default React.forwardRef(Amount);
